<template>
	<!-- 操作栏 -->
	<el-input placeholder="请输入商品名称" v-model="goodsName" :value="goodsName" @keyup.enter="searchGoods"></el-input>
	<el-input placeholder="请输入最低价格" v-model="inpMinPrice" :value="inpMinPrice" @keyup.enter="searchGoods"></el-input>~
	<el-input placeholder="请输入最高价格" v-model="inpMaxPrice" :value="inpMaxPrice" @keyup.enter="searchGoods"></el-input>
	<el-button class="searchBtn" type='info' :icon="Search" @click="searchGoods">搜索</el-button>
	<el-button class="addBtn" type='info' :icon="CirclePlus" @click="addGoods" v-if="adminRole!=2">添加</el-button>
	<!-- 表格 -->
	<el-table :data="tableData" style="width: 100%">
		<el-table-column label="商品图片" align="center">
			<template #default="scope">
				<el-image :src="baseUrl + scope.row.wareCover" style="width: 50px; height:50px;border-radius: 10px;"></el-image>
			</template>
		</el-table-column>
		<el-table-column prop="wareName" label="商品名称" align="center"></el-table-column>
		<el-table-column prop="price" label="商品原价" align="center"></el-table-column>
		<el-table-column prop="brandName" label="品牌" align="center"></el-table-column>
		<el-table-column prop="flavorName" label="香型" align="center"></el-table-column>
		<el-table-column prop="proofName" label="度数" align="center"></el-table-column>
		<el-table-column prop="downStatus" align="center">
			<template #header>
				<el-dropdown @command="handleCommand" trigger="click">
					<span class="el-dropdown-link">
					  上架状态<el-icon class="el-icon--right"><arrow-down /></el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="2">全部</el-dropdown-item>
							<el-dropdown-item command="0">已下架</el-dropdown-item>
							<el-dropdown-item command="1">已上架</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</template>
			<template #default="scope">
				<span v-if="scope.row.downStatus == 0">已下架</span>
				<span v-if="scope.row.downStatus == 1">已上架</span>
			</template>
		</el-table-column>
		<el-table-column prop="num" label="库存量" align="center"></el-table-column>
		<el-table-column prop="vipPrice" label="会员价" align="center"></el-table-column>
		<el-table-column prop="type" align="center">
			<template #header>
				<el-dropdown @command="handleCommand_1" trigger="click">
					<span class="el-dropdown-link">
					  商品类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="2">全部</el-dropdown-item>
							<el-dropdown-item command="0">普通商品</el-dropdown-item>
							<el-dropdown-item command="1">积分商品</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</template>
			<template #default="scope">
				<span v-if="scope.row.type == 0">普通商品</span>
				<span v-if="scope.row.type == 1">积分商品</span>
			</template>
		</el-table-column>
		<el-table-column v-if="adminRole!=2" label="操作" style="width: 200px;" align="center">
			<template #default="scope">
				<div class="scope" style="display: flex;">
					<el-button type="primary" @click="revisegoods(scope.row)"
						style="padding: 7px 10px;font-size: 12px;">修改</el-button>
					<el-button type="danger" @click="del(scope.row.wareId)"
						style="padding: 7px 10px;font-size: 12px;">删除</el-button>
				</div>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination
		layout="prev,pager,next"
		:page-size="pageSize"
		:page-count="pageCount"
		v-model:current-page="pageIndex"	
		@current-change="changePage"
	></el-pagination>
	<el-dialog title="确定要删除吗？" v-model="dialogVisible" width="30%" center>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" @click="delgoods">确 定</el-button>
			<el-button @click="dialogVisible = false">取 消</el-button>
		</span>
	</el-dialog>
</template>

<script setup lang="ts">
	// el组件
	import { ElMessage, ElMessageBox} from 'element-plus';
	import {Search,CirclePlus,ArrowDown} from '@element-plus/icons-vue';
	// 接口
	import {goodsList,searchGoodsInfo,searchClassification,delGoods } from "../api/wqj/index"
	// ref等相关
	import { ref,shallowRef,reactive ,onMounted} from 'vue';
	// 路由
	import { useRouter ,useRoute} from 'vue-router';
	let router=useRouter()
	let route=useRoute()
	// 自定义
	let baseUrl="http://192.168.16.199:8081/"//基础地址用于图片显示
	// 搜索栏内容
	let goodsName=ref("")
	let inpMinPrice=ref("")
	let inpMaxPrice=ref("")
	// 表格数据
	let tableData=ref([])
	let pageSize:any='5';//每页显示4条数据
	let pageIndex=ref<string>('1');//当前显示第0页
	let pageCount=shallowRef<number>(0)//总页数
	// 登录状态
	let adminRole=ref(0)//判断登录状态
	let Listingstatus=ref(null) //上架状态
	let Productcategory=ref(null)//商品类别
	let userMsg=''
	let dialogVisible=ref(false)
	let delWareId=ref<number>()
	// 全部商品列表
	const showAllGoods=async()=>{
		let res=await goodsList({
			pageIndex:pageIndex.value,
			pageSize:pageSize
		})
		Object.assign(tableData.value,res.wareList)
		pageCount.value=res.pageCount
		// console.log("全部商品",tableData.value)
	}
	// 搜索
	const searchGoods=async()=>{
		let res=await searchGoodsInfo({
			pageIndex: pageIndex.value,
			pageSize: pageSize,
			minPrice:inpMinPrice.value,
			maxPrice: inpMaxPrice.value,
			wareName: goodsName.value
		})
		tableData.value=res.wareList
		pageCount.value=res.pageCount
		// console.log("搜索结果",tableData.value)
	}
	// 获取分类跳转的数据
	const getMessage=async()=>{
		let res=await searchClassification({
			brand: route.query.brand,
			flavor: route.query.flavor,
			degree: route.query.proof,
			pageIndex:Number(pageIndex.value),
			pageSize: Number(pageSize)
		})
		tableData.value=res.wareList
		pageCount.value=res.pageCount
		// console.log("分类跳转结果",res)
	}
	// 下拉框--上架状态 
	const handleCommand = async(command: string | number | object) => {
		// console.log(command)//command 选中的菜单项 0已下架 1已上架 2全部
		Listingstatus.value=command
		if(Productcategory.value!=null){//选择了商品分类
			if(command==2){//上架状态选中全部
				let res=await searchGoodsInfo({
					pageIndex: Number(pageIndex.value),
					pageSize: Number(pageSize),
					type:Productcategory.value,
				})	
				Listingstatus.value= null
				tableData.value=res.wareList
				pageCount.value=res.pageCount
				// console.log("上架:全部+商品类型结果",tableData.value)
			}else{//上架状态--已上架/已下架
				let res=await searchGoodsInfo({
					pageIndex: Number(pageIndex.value),
					pageSize: Number(pageSize),
					type:Productcategory.value,
					downStatus:Listingstatus.value
				})
				tableData.value=res.wareList
				pageCount.value=res.pageCount
				// console.log("上/下架+商品类型结果",tableData.value)
			}
		}else{//未选择商品分类
			if(Listingstatus.value==2){//上架--全部
				showAllGoods()//展示全部商品
				Listingstatus.value=null
			}else{
				let res=await searchGoodsInfo({
					pageIndex: Number(pageIndex.value),
					pageSize: Number(pageSize),
					downStatus:Listingstatus.value
				})
				tableData.value=res.wareList
				pageCount.value=res.pageCount
				// console.log("上架状态结果",tableData.value)
			}
		}
	}
	// 下拉框--商品分类
	const handleCommand_1 = async(command: string | number | object) => {
		// console.log(command)//command 选中的菜单项 0普通 1积分 2全部
		Productcategory.value=command
		if(Listingstatus.value!=null){//选择了上架状态
			if(command==2){//商品分类选中全部
				let res=await searchGoodsInfo({
					pageIndex: Number(pageIndex.value),
					pageSize: Number(pageSize),
					downStatus:Listingstatus.value
				})
				Productcategory.value= null
				tableData.value=res.wareList
				pageCount.value=res.pageCount
				// console.log("商品:全部+上架状态结果",tableData.value)
			}else{//上架状态--已上架/已下架
				let res=await searchGoodsInfo({
					pageIndex: Number(pageIndex.value),
					pageSize: Number(pageSize),
					type:Productcategory.value,
					downStatus:Listingstatus.value
				})
				tableData.value=res.wareList
				pageCount.value=res.pageCount
				// console.log("普通/积分+上架状态结果",tableData.value)
			}
		}else{//未选择上架状态
			if(Productcategory.value==2){//上架--全部
				showAllGoods()//展示全部商品
				Productcategory.value=null
			}else{
				let res=await searchGoodsInfo({
					pageIndex: Number(pageIndex.value),
					pageSize: Number(pageSize),
					type:Productcategory.value,
				})
				tableData.value=res.wareList
				pageCount.value=res.pageCount
				// console.log("商品分类结果",tableData.value)
			}
		}
	}
	// 切页
	const changePage=(page:string)=>{
		pageIndex.value=String(page);
		if(Productcategory.value!=null){
			handleCommand_1(Productcategory.value)
		}else if(Listingstatus.value!=null){
			handleCommand(Listingstatus.value)
		}else if(route.query.message==0){
			getMessage()
		}else if(goodsName.value!=''){
			searchGoods()
		}else{
			showAllGoods()
		}
	}
	// 添加商品
	const addGoods=()=>{
		router.push('/addGoods')
	}
	// 修改商品
	const revisegoods=(item)=>{
		console.log("item",item)
		router.push('/addGoods?wareId='+item.wareId)
	}
	// 删除商品弹窗
	const del=(wareId:number)=>{
		// console.log("wareId",wareId)
		dialogVisible.value=true
		delWareId.value=wareId
	}
	// 确认删除
	const delgoods=async()=>{
		let res=await delGoods({
			wareId:delWareId.value
		})
		if(res==undefined){
			ElMessage.success('商品删除成功！')
			dialogVisible.value=false
			searchGoods()
		}
	}
	// 挂载
	onMounted(()=>{
		userMsg=JSON.parse(sessionStorage.getItem('Msg'))
		adminRole.value=userMsg.adminRole//用户角色
		// 分类跳转结果
		if(route.query.message==0){
			getMessage()
		}else{
			showAllGoods()
		}
		// console.log("分类跳转结果",route.query)
	})
</script>

<style scoped lang="less">
	.el-input{
		width: 150px;
		margin-right: 10px;
		border: none;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	.addBtn{
		background-color: #00a0e9;
		border: none;
		float: right;
		margin-right: 20px;
	}
	.el-table{
		margin-top: 20px;
	}
	/* 表格间隙 */
	:deep(.el-table__body) {
	  -webkit-border-vertical-spacing: 9px;
	}
	/* 分页样式 */
	.el-pagination{
		--el-pagination-bg-color:none;
		--el-pagination-button-disabled-bg-color:none;
		justify-content: center;
	}
	.dialog-footer{
		display: flex;
		justify-content: center;
		margin-top: 5%;
	}
</style>